<template>
	<view v-if="vuex_isMobile" class="bg-m">
		<view class="index-content-m">
			<view class="index-right-title">
				您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
			</view>
			<top-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">
				<view class="content-dept-detail-m">
					<view class="title">
						{{detailInfo.name}}
					</view>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>简介</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<view class="dept-introduction">
						<view class="dept-info">
							<view class="dept-time">
								科室时间：{{detailInfo.deptTime}}
							</view>
							<view class="dept-time">
								科室电话：{{detailInfo.phone}}
							</view>
							<view class="dept-text">
								{{detailInfo.introduction}}
							</view>
						</view>
					</view>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>专家</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<view class="dept-expert">
						<view class="dept-expert-item" v-for="(itm, idx) in expertList1" :key="idx"
							@click="toExpertDetail(itm)">
							<image :src="itm.thumb" class="expert-img"></image>
							<view class="expert-name">{{itm.name}}</view>
						</view>
					</view>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>特色</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<view class="dept-feature">
						{{detailInfo.characteristic}}
					</view>
				</view>
				<view class="foot-m">
					<view class="back" @click="back">
						{{`< 返回上一页`}}
					</view>
				</view>
			</view>
		</view>
		<foot-bar />
	</view>
	<view v-else class="bg">
		<view class="index-content">
			<left-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">
				<view class="index-right-title">
					您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
				</view>
				<view class="content-dept-detail">
					<view class="title">
						{{detailInfo.name}}
					</view>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>简介</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<view class="dept-introduction">
						<image :src="detailInfo.thumb" class="dept-img"></image>
						<view class="dept-info">
							<view class="dept-time">
								科室时间：{{detailInfo.deptTime}}
							</view>
							<view class="dept-time">
								科室电话：{{detailInfo.phone}}
							</view>
							<view class="dept-text">
								{{detailInfo.introduction}}
							</view>
						</view>
					</view>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>专家</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<swiper circular indicator-dots autoplay style="height: 465px;">
						<swiper-item v-for="(item, index) in expertList" :key="index">
							<view class="dept-expert">
								<view class="dept-expert-flex">
									<view class="dept-expert-item" v-for="(itm, idx) in item" :key="idx"
										@click="toExpertDetail(itm)">
										<!-- <image src="/static/index/expert/doctor.jpeg" class="expert-img"></image> -->
										<image :src="itm.thumb" class="expert-img"></image>
										<view class="expert-name">{{itm.name}}</view>
										<view class="expert-name1">{{itm.jobTitleName}}</view>
										<view class="expert-name1 text-overflow-2">
											{{itm.introduction}}
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="detail-title">
						<view class="detail-title-tex"><text class="main-color">科室</text>特色</view>
						<view class="detail-title-border">
							<view class="detail-title-border-left"></view>
							<view class="detail-title-border-right"></view>
						</view>
					</view>
					<view class="dept-feature">
						{{detailInfo.characteristic}}
					</view>
				</view>
				<view class="foot">
					<view class="back" @click="back">
						{{`< 返回上一页`}}
					</view>
				</view>
			</view>
		</view>
		<foot-bar />
	</view>


</template>

<script>
	import {
		getDeptExpertByDept,
		getDeptDetail
	} from "@/common/api.js";
	import footBar from "@/pages/bottom/foot-bar.vue"
	import leftMenu from "@/pages/left/left-menu.vue"
	import topMenu from "@/pages/left/top-menu.vue"
	import {
		getMenu
	} from "@/common/api.js";
	export default {
		components: {
			footBar,
			leftMenu,
			topMenu,
		},
		data() {
			return {
				expertList: [],
				expertList1: [],
				deptId: '',
				detailInfo: {},
				secondMenu: [],
				activename: 0,
				activeType: '',
				activeTopOneMenuName: '',
				activeTopTwoMenuName: ''
			}
		},
		mounted() {
			// this.$refs.scrollView.addEventListener('mousewheel', this.handleMouseWheel)	
		},
		onLoad(option) {
			this.active = option.active
			let tabs = []
			const timer = setInterval(() => {
				tabs = uni.getStorageSync('tabs')
				if (tabs.length > 0) {
					for (var i in tabs) {
						if (this.active == tabs[i]['id']) {
							this.activeTopOneMenuName = tabs[i]['name']
							uni.setStorageSync('activeTopOneMenuName', tabs[i]['name'])
						}
					}
					uni.$emit('activeTo', this.active)
					getMenu({
						parentId: this.active
					}).then(response => {
						this.secondMenu = response.data
						this.activename = response.data[0].id
						this.activeType = response.data[0].tableName
						this.activeTopTwoMenuName = response.data[0].name
						uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
						uni.setStorageSync('activeMenuName', this.activename)
						uni.setStorageSync('activeMenuType', this.activeType)

					})
					clearInterval(timer)
				}
			}, 100)
			this.getInfo(option.id)
			let deptDetail = uni.getStorageSync('deptDetail')
			if (deptDetail) {
				this.detailInfo = deptDetail
			}
			this.activeTopOneMenuName = uni.getStorageSync('activeTopOneMenuName')
			eventChannel.on('pageData', data => {
				this.secondMenu = data.data
				this.activename = data.data[0].id
				this.activeType = data.data[0].tableName
				this.activeTopTwoMenuName = data.data[0].name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
			})
		},
		methods: {
			getInfo(id) {
				this.deptId = id
				getDeptDetail({
					id
				}).then(res => {
					uni.setStorageSync('deptDetail', res.data)
					this.detailInfo = res.data
				})
				getDeptExpertByDept({
					deptId: id
				}).then(res => {
					this.expertList1 = res.data
					// res.data = res.data.concat(res.data).concat(res.data)
					const expertLists = [];
					const count = Math.ceil(res.data.length / 4);
					for (let i = 1; i <= count; i++) {
						expertLists.push([]);
					}

					for (let i = 1; i <= res.data.length; i++) {
						const item = res.data[i - 1];

						expertLists[Math.ceil(i / 4) - 1].push(item);
					}
					this.expertList = expertLists;
				})
			},
			handleMouseWheel(event) {
				console.log(event)
			},
			back() {
				uni.navigateBack()
			},
			toExpertDetail(item) {
				uni.navigateTo({
					url: '/pages/expert-detail?active=2&activeMenuName=' + this.activename + '&activeMenuType=' +
						this.activeType + '&id=' + item.id,
				})
			},
			activeChange(e) {
				this.activename = e.id
				this.activeType = e.tableName
				this.activeTopTwoMenuName = e.name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
				uni.navigateTo({
					url: '/pages/content?active=2&activeMenuName=' + this.activename + '&activeMenuType=' + this
						.activeType
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: auto;
		background: url(@/static/logo/bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding: 20px 0;
	}

	.bg-m {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 20px 0;
	}

	.index-content {
		width: 1200px;
		margin: auto;
		background-color: #FFFFFF;
		display: flex;

		.index-right {
			flex: 1;
			margin-top: 5px;
			margin-right: 20px;
			padding-bottom: 20px;
			background-color: #FFFFFF;
			min-height: 700px;

			.index-right-title {
				font-weight: 400;
				font-size: 12px;
				color: #686868;
				line-height: 16px;
				padding-top: 15px;
				cursor: pointer;
			}
		}
	}

	.index-content-m {
		width: 100%;
		background-color: #FFFFFF;

		.index-right-title {
			background-color: #193F93;
			font-weight: 400;
			font-size: 43px;
			color: #FFFFFF;
			line-height: 150px;
			padding-left: 72px;
			cursor: pointer;
		}

		.index-right {
			padding-bottom: 40px;
			background-color: #FFFFFF;
			min-height: 700px;


		}
	}

	.content-dept-detail {

		margin: 0 auto;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 80px;
			font-size: 24px;
			color: $maincolor;
		}

		.detail-title {

			.detail-title-tex {
				font-weight: 500;
				font-size: 20px;
				color: #434343;
				line-height: 27px;
			}

			.detail-title-border {
				display: flex;
				margin-top: 4px;

				.detail-title-border-left {
					width: 40px;
					height: 1px;
					background: #193F93;
				}

				.detail-title-border-right {
					width: 20px;
					height: 1px;
					background: #DCB67E;
				}
			}
		}

		.dept-introduction {
			margin-top: 20px;
			display: flex;
			margin-bottom: 20px;

			.dept-img {
				width: 320px;
				height: 240px;
			}

			.dept-info {
				flex: 1;
				padding-left: 20px;

				.dept-time {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
					margin-bottom: 10px;
				}

				.dept-text {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
				}
			}
		}

		.dept-expert {
			padding-top: 20px;
			width: 864px;
			margin-bottom: 40px;
			white-space: nowrap;

			.dept-expert-flex {
				display: flex;
			}


			.dept-expert-item {
				cursor: pointer;
				display: inline-block;
				width: 196px;
				margin-right: 20px;

				.expert-img {
					width: 196px;
					height: 239px;
					margin-bottom: 8px;
				}

				.expert-name {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
					margin-bottom: 8px;
				}

				.expert-name1 {
					width: 196px;
					font-weight: 400;
					font-size: 12px;
					color: #686868;
					line-height: 16px;
					margin-bottom: 4px;
					white-space: pre-wrap;
				}
			}
		}

		.dept-feature {
			padding-top: 25px;
			font-weight: 400;
			font-size: 14px;
			color: #434343;
			line-height: 19px;
		}
	}

	.content-dept-detail-m {

		margin: 0 79px;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 104px;
			font-size: 72px;
			color: $maincolor;
			padding-bottom: 90px;
		}

		.detail-title {

			.detail-title-tex {
				font-weight: 500;
				font-size: 54px;
				color: #434343;
				line-height: 77px;
			}

			.detail-title-border {
				display: flex;
				margin-top: 14px;

				.detail-title-border-left {
					width: 108px;
					height: 2px;
					background: #193F93;
				}

				.detail-title-border-right {
					width: 54px;
					height: 2px;
					background: #DCB67E;
				}
			}
		}

		.dept-introduction {
			margin-top: 36px;
			margin-bottom: 72px;

			.dept-info {
				.dept-time {
					font-weight: 400;
					font-size: 43px;
					color: #434343;
					line-height: 63px;
					margin-bottom: 28px;
				}

				.dept-text {
					font-weight: 400;
					font-size: 43px;
					color: #434343;
					line-height: 63px;
				}
			}
		}

		.dept-expert {
			padding-top: 54px;
			margin-bottom: 36px;
			display: flex;
			flex-wrap: wrap;

			.dept-expert-item {
				width: 270px;
				margin-right: 32px;
				margin-bottom: 36px;

				.expert-img {
					width: 270px;
					height: 378px;
				}

				.expert-name {
					font-weight: 400;
					font-size: 43px;
					color: #434343;
					line-height: 63px;
					margin-top: 14px;
					text-align: center;
				}
			}
		}

		.dept-feature {
			padding-top: 36px;
			font-weight: 400;
			font-size: 43px;
			color: #434343;
			line-height: 63px;
		}
	}

	.foot {
		display: flex;
		justify-content: center;
		margin-top: 60px;

		.back {
			cursor: pointer;
			width: 134px;
			line-height: 40px;
			border-radius: 4px 4px 4px 4px;
			border: 1px solid #D8D8D8;
			text-align: center;
			font-weight: 400;
			font-size: 14px;
			color: #434343;
		}
	}

	.foot-m {
		display: flex;
		justify-content: center;
		margin-top: 108px;

		.back {
			cursor: pointer;
			width: 241px;
			line-height: 72px;
			border-radius: 7px;
			border: 2px solid #D8D8D8;
			text-align: center;
			font-weight: 400;
			font-size: 25px;
			color: #434343;
		}
	}
</style>